/*
 * @Author: silas
 * @Date: 2021-03-19 09:59:31
 * @Last Modified by: silas
 * @Last Modified time: 2021-05-18 15:53:31
 */
<template>
  <div class="workspace">
    <div class="top">
      <h3 class="titles">我的工作台</h3>
      <div class="types">
        <span
          class="it"
          @click="handle_type(1)"
          :class="types == 1 ? 'act' : ''"
          >全业务</span
        ><span
          @click="handle_type(2)"
          class="it"
          :class="types == 2 ? 'act' : ''"
          >自服务</span
        >
      </div>
    </div>
    <div class="income-wrapper">
      <div class="income">
        <div v-for="(it, i) in incomes" :key="i" class="it">
          <div style="height: 100%; width: 100%">
            <div style="height: 250px; width: 100%" :id="'income' + i"></div>
          </div>
        </div>
      </div>
      <div class="mahao">
        <h3 class="title1">码号收入趋势</h3>
        <div style="height: 100%; width: 100%">
          <div style="height: 320px; width: 100%" id="mahao"></div>
        </div>
      </div>
      <div class="mahao">
        <h3 class="title1">台阶收入趋势</h3>
        <div class="rightEchart">
            <principalNumber :principal="principal"></principalNumber>
        </div>
      </div>
      <div class="mahao">
        <div class="ma-top">
          <h3 class="titles">预算完成情况</h3>
          <div v-if="!trendBoolean && !sourceBoolean && !productBoolean" style="flex: 1; text-align: right">
            <el-select v-model="form.indexCode" size="mini">
              <el-option
                v-for="(it, i) in codes"
                :value="it.value"
                :label="it.label"
                :key="i"
              ></el-option>
            </el-select>
            <el-date-picker
              value-format="yyyyMM"
              v-model="form.time"
              size="mini"
              style="width: 140px"
              type="month"
              :picker-options="endDateDisabled"
            ></el-date-picker>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="g-table" v-if="!trendBoolean && !sourceBoolean">
          <div class="breadcrumb">
            <div v-if="areaLvl1" @click="handle_back">杭州</div>
            <p v-if="areaLvl1">></p>
            <div @click="handle_up">{{ areaLvl1 }}</div>
            <p v-if="areaLvl2">></p>
            <div>{{ areaLvl2 }}</div>
          </div>
          <el-table
            v-if="!productBoolean"
            v-loading="tableLoading"
            :data="tableData"
            style="width: 100%"
            class="tableTh"
            border
            stripe
            ref="table"
          >
            <el-table-column align="center" label="单位" min-width="80">
              <template slot-scope="scope">
                <div class="area" @click="handle_area(scope.row)">
                  {{ scope.row.areaName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="150">
              <template slot-scope="scope">
                <div class="icon-button" :disabled="scope.row.areaId == '1' || scope.row.areaId == '0'">
                    <i class="el-icon-tickets iconfont"></i>
                    <span class="text" @click="handle_pruduct(scope.row)">看产品</span>
                </div>
                <div class="icon-button" :disabled="scope.row.areaId == '1' || scope.row.areaId == '0'">
                    <i class="el-icon-data-line iconfont"></i>
                    <span class="text" @click="handle_trend(scope.row)">看趋势</span>
                </div>
                <div class="icon-button" :disabled="(form.indexCode != 'YS10000' && form.indexCode != 'YS10077' && form.indexCode != 'YS10091') || (scope.row.areaId == '1' || scope.row.areaId == '0')">
                    <i class="el-icon-pie-chart iconfont"></i>
                    <span class="text" @click="handle_source_single(scope.row)">看来源</span>
                </div>
                <!-- <div :class=" scope.row.areaId == '1' || scope.row.areaId == '0'? 'grey': 'area'"
                  @click="handle_pruduct(scope.row)"
                >看产品</div>
                <div :class=" scope.row.areaId == '1' || scope.row.areaId == '0'? 'grey': 'area'"
                  @click="handle_trend(scope.row)"
                >看趋势</div>
                <div :class="(form.indexCode != 'YS10000' && form.indexCode != 'YS10077' && form.indexCode != 'YS10091') || (scope.row.areaId == '1' || scope.row.areaId == '0')?'grey': 'area'" @click="handle_source_single(scope.row)">看来源</div> -->
              </template>
            </el-table-column>
            <el-table-column align="center" label="年度目标">
              <el-table-column
                align="center"
                prop="thisYearBudget"
                label="绝对值"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="thisYearBudgetInrease"
                label="增长率"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.thisYearBudgetInrease + "%" }}
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="月度">
              <el-table-column
                min-width="80"
                align="center"
                prop="thisMonthIncome"
                label="本月"
              ></el-table-column>
              <el-table-column
                min-width="80"
                align="center"
                prop="lastYearIncome"
                label="上年同月"
              ></el-table-column>
              <el-table-column
                min-width="80"
                align="center"
                prop="tbYearInrease"
                label="同比增长"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.tbYearInrease + "%" }}
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="年度">
              <el-table-column
                min-width="85"
                align="center"
                prop="thisYearLjIncome"
                label="本年累计"
              ></el-table-column>
              <el-table-column
                min-width="85"
                align="center"
                prop="lastYearLjIncome"
                label="上年累计"
              ></el-table-column>
              <el-table-column
                min-width="80"
                align="center"
                prop="tbYearInreaseAmt"
                label="累计净增"
              ></el-table-column>
              <el-table-column
                min-width="80"
                align="center"
                prop="ntbYearInrease"
                label="同比增长"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.ntbYearInrease + "%" }}
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="预算当月完成">
              <el-table-column
                min-width="80"
                align="center"
                prop="thisMonthBudget"
                label="当月预算"
              ></el-table-column>
              <el-table-column min-width="80" align="center" label="当月完成率">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.completeMonthBudget + "%" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="80"
                align="center"
                prop="thisMonthIncomeThisMonthBudget"
                label="与预算差距"
              ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="预算年累计完成">
              <el-table-column
                min-width="90"
                align="center"
                prop="thisYearBudgetLj"
                label="预算目标"
              ></el-table-column>
              <el-table-column min-width="80" align="center" label="完成率">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.completeBudgetLj + "%" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="80"
                align="center"
                prop="gapOfBudgetLj"
                label="与年度预算差距"
              ></el-table-column>
            </el-table-column>
          </el-table>
          <product v-if="productBoolean" :productData="productData" @tablePro_back="tablePro_back" @handle_trend="handle_trend" @handle_source="handle_source"></product>
        </div>
        <trend v-if="trendBoolean" :trendData="trendData" @table_back="table_back"></trend>
        <sourceTrend v-if="sourceBoolean" :sourceData="sourceData" @source_back="source_back"></sourceTrend>
      </div>
    </div>
  </div>
</template>

<script>
import principalNumber from "./components/principalNumber";
import { stepOverall } from "@/api/codeIncome/analysis";
import {
  getIncomesList,
  getNumList,
  getbudgetCompletion,
  getCodes,
  getMonths,
} from "@/api/workspace/income";
import product from './components/product'
import trend from './components/trend'
import sourceTrend from './components/sourceTrend'
export default {
  name: "income",
  components: {
    product,
    trend,
    sourceTrend,
    principalNumber
  },
  data() {
    return {
      types: 1,
      incomes: ["", "", "", ""],
      myChart: [],
      mahaoChart: "",
      tableData: [],
      tableLoading: false,
      form: {
        time: "",
        areaId: "",
        indexCode: "YS10000",
      },
      codes: [],
      areaName: "",
      areaId: "",
      areaLvl1: "",
      areaLvl2: "",
      areaLvlId1: "",
      productData: {},
      productBoolean: false,
      trendData: {},
      trendBoolean: false,
      sourceData: {},
      sourceBoolean: false,
      endDateDisabled: this.pickerDisabled(),
      disabledTime: "",
      principal: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    pickerDisabled() {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear(),
              a = t.getMonth() + 1;
            if (
              (a >= 1 && a <= 9 && (a = "0" + a),
              n.toString() + a.toString() > e.disabledTime)
            ) {
              return !0;
            }
          }
        },
      };
    },
    async init() {
      this.form.time = await this.getMaxMonths();
      this.getData();
      this.getStepData();
      this.getTableData();
      this.getCodes();
    },
    getData() {
      var that = this,
        incomes = [],
        titles = ["主营业务收入", "基本面收入", "DICT收入", "码号收入"];
      console.log(this.types);
      getIncomesList({
        code: that.types,
      }).then((res) => {
        if (res && res.code == 200) {
          incomes = [
            res.data.incomeCompleteS,
            res.data.basicincomeS,
            res.data.DICTcomeS,
            res.data.mahaocomeS,
          ];
          console.log(incomes)
          incomes.map((it, i) => {
            let max = it.tbYearInrease.reduce((a,b) => {
                return Number(b)>Number(a) ? b:a
            })
            that.myChart[i] = that.$echarts.init(
              document.getElementById("income" + i)
            );
            that.myChart[i].setOption({
              title: {
                text: titles[i],
                textStyle: {
                  fontSize: "14",
                  fontWeight: "normal",
                  color: "#666",
                },
              },
              grid: {
                // left: "20%",
                x:10,
                x2: 10
              },
              tooltip: {
                  formatter:function(params){ //标签内容
                    let numArr = params.value.split('.')
                    if (numArr.length > 1) {
                        return  params.value+'%'
                    } else {
                        return  params.value
                    }
                  },
              },
              xAxis: [
                {
                  data: it.acctMonthS,
                },
              ],
              legend: {
                orient: "horizontal",
                data: ["上年完成", "本年完成", "累计同比"],
                // left: 10,
              },
              yAxis: [
                {
                //   axisLabel: {
                //     fontSize: 12,
                //     color: "#a2a2a2",
                //   },
                //   splitLine: {
                //     show: true,
                //     color: "#d3ded3",
                //     lineStyle: {
                //       type: "dashed",
                //     },
                //   },
                  splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        //y轴刻度线
                        show: false,
                    },
                    axisLine: {
                        //y轴
                        show: false,
                    },
                },
                {
                  type: "value",
                  max: max*2,
                //   axisLabel: {
                //     fontSize: 12,
                //     color: "#333",
                //     formatter: "{value} %",
                //   },
                //   splitLine: {
                //     show: false, //是否显示分隔线。
                //   },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        //y轴刻度线
                        show: false,
                    },
                    axisLine: {
                        //y轴
                        show: false,
                    },
                },
              ],
              series: [
                {
                  name: "上年完成",
                  type: "line",
                  data: it.completedLastYearS,
                  itemStyle: {
                    normal: {
                      color: "#a3a1fb",
                      barBorderRadius: [6, 6, 0, 0],
                      label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: "grey",
                        },
                        rotate: 30
                      }
                    },
                  },
                },
                {
                  name: "本年完成",
                  type: "line",
                  data: it.completedThisYearS,
                  itemStyle: {
                    normal: {
                      color: "#5fe3a1",
                      barBorderRadius: [6, 6, 0, 0],
                      label: {
                        show: true,
                        position: 'bottom',
                        textStyle: {
                            color: "grey",
                        },
                        rotate: 30
                      }
                    },
                  },
                },
                {
                  name: "累计同比",
                  type: "bar",
                  data: it.tbYearInrease,
                  yAxisIndex: 1,
                  itemStyle: {
                    normal: {
                      color: "#feb6a9",
                      label: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            color: "grey",
                            fontSize: '10'
                        },
                        formatter:function(params){ //标签内容
                            return  params.value+'%'
                        },
                      }
                    },
                  },
                },
              ],
            });
          });
          that.incomes = incomes;
        }
      });

      getNumList({
        code: that.types,
      }).then((res) => {
        console.log(res);
        that.mahaoChart = that.$echarts.init(document.getElementById("mahao"));
        that.mahaoChart.setOption({
          legend: {
            data: ["存量收入", "增量收入", "整体收入"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: true,
              data: res.data.revenueTrend.acctMonthS,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "存量收入",
              type: "bar",
              barWidth: 10,
              stack: "收入",
              data: res.data.revenueTrend.stockS,

              itemStyle: {
                normal: {
                  label: {
                      show: true,
                      fontSize: 10,
                      color: '#000'
                  },
                  color: "#9295be",
                },
              },
            },
            {
              name: "增量收入",
              type: "bar",
              barWidth: 10,
              stack: "收入",
              data: res.data.revenueTrend.incrementS,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    fontSize: 10,
                    color: '#000',
                    position: 'left'
                  },
                  color: "#fea16a",
                  barBorderRadius: [6, 6, 0, 0],
                },
              },
            },
            {
              name: "整体收入",
              type: "line",
              data: res.data.revenueTrend.wholeS,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    distance: 20
                  },
                  color: "#fd6d52",
                },
              },
            },
          ],
        });
      });
    },
    getStepData() {
      stepOverall().then((res) => {
        if (res.code == 200) {
          let obj = {};
          let arr1 = [];
          let arr2 = [];
          let arr3 = [];
          let dealArr = []
          dealArr = res.data.tableData.slice(0, res.data.showNum)
          dealArr.forEach((item) => {
            arr1.push(item.cycleValue);
            arr2.push(item.indexValue);
            arr3.push(item.indexValueHb);
          });
          obj["cycleValue"] = arr1;
          obj["indexValue"] = arr2;
          obj["indexValueHb"] = arr3;
          this.principal = obj;
        }
      });
    },
    getTableData() {
      var that = this;
      that.tableLoading = true;
      getbudgetCompletion({
        acctMonth: that.form.time,
        areaId: that.form.areaId,
        code: that.types,
        indexCode: that.form.indexCode,
      }).then((res) => {
        if (res && res.code == 200) {
          that.tableData = res.data.length && res.data;
        }
        that.tableLoading = false;
      });
    },
    handle_type(val) {
      this.types = val;
      this.getData();
    },
    getCodes() {
      var data = [];

      getCodes().then((res) => {
        console.log(res);
        res.data;
        for (var i in res.data) {
          data.push({ label: res.data[i], value: i });
        }
        this.codes = data;
      });
    },
    getMaxMonths() {
      return new Promise((resolve) => {
        getMonths().then((res) => {
          resolve(res.msg);
          this.disabledTime = res.msg;
        });
      });
    },
    handleQuery() {
      this.getTableData();
    },
    handle_area(it) {
      if (it.areaLvl >= 6) {
        return;
      }
      if (it.areaLvl == 4) {
        this.areaLvl1 = it.areaName;
        this.areaLvlId1 = it.areaId;
      } else if (it.areaLvl == 5) {
        this.areaLvl2 = it.areaName;
      }
      this.form.areaId = it.areaId;
      this.getTableData();
    },
    handle_back() {
      this.areaLvl1 = "";
      this.areaLvl2 = "";
      this.form.areaId = 2;
      this.getTableData();
    },
    handle_up() {
      this.areaLvl2 = "";
      this.form.areaId = this.areaLvlId1;
      this.getTableData();
    },
    handle_pruduct(row) {
      if (row.areaId == '1' || row.areaId == '0') {
        return
      }
      let obj = {}
      obj.areaId = row.areaId
      obj.name = row.areaName
      obj.time = this.form.time
      if (this.form.indexCode == 'YS10000') {
        obj.remarks = '1'
      } else if (this.form.indexCode == 'YS10077') {
        obj.remarks = '2'
      } else {
        obj.remarks = '3'
      }
      obj.types = this.types
      this.productData = obj
      this.productBoolean = true
    },
    handle_trend(row) {
      if (row.areaId == '1' || row.areaId == '0') {
        return
      }
      let obj = {}
      obj.areaId = row.areaId
      obj.name = row.areaName
      obj.indexCode = row.indexCode
      obj.time = this.form.time
      this.trendData = obj
      this.trendBoolean = true;
    },
    table_back() {
      this.trendBoolean = false;
    },
    handle_source_single(row) {
        if ((this.form.indexCode != 'YS10000' && this.form.indexCode != 'YS10077' && this.form.indexCode != 'YS10091') || (row.areaId == '1' || row.areaId == '0')) {
          return
        }
        let obj = {}
        obj.areaId = row.areaId
        obj.time = this.form.time
        obj.indexCode = this.form.indexCode
        if (this.form.indexCode == 'YS10000') {
            obj.remarks = '1'
        } else if (this.form.indexCode == 'YS10077') {
            obj.remarks = '2'
        } else {
            obj.remarks = '3'
        }
        obj.code = this.types
        obj.name = row.areaName
        this.sourceData = obj
        this.sourceBoolean = true
    },
    handle_source(row) {
        if ((this.form.indexCode != 'YS10000' && this.form.indexCode != 'YS10077'  && this.form.indexCode != 'YS10091') || (row.areaId == '1' || row.areaId == '0')) {
            return
        }
        let obj = {}
        obj.areaId = row.areaId
        obj.time = this.form.time
        obj.indexCode = row.indexCode
        if (this.form.indexCode == 'YS10000') {
            obj.remarks = '1'
        } else if (this.form.indexCode == 'YS10077') {
            obj.remarks = '2'
        } else {
            obj.remarks = '3'
        }
        obj.code = this.types
        obj.name = row.areaName
        this.sourceData = obj
        this.sourceBoolean = true
    },
    source_back() {
        this.sourceBoolean = false
    },
    tablePro_back() {
      this.productBoolean = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.workspace {
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titles {
      font-size: 16px;
      font-weight: bold;
    }
    .types {
      font-size: 12px;
      color: #7b7b7b;
      display: flex;
      align-items: center;

      .it {
        background-color: #fff;
        cursor: pointer;
        flex: 1;
        width: 70px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border: 1px solid #d9d9d9;
        &:first-child {
          border-right: 0;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        &:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
      .act {
        color: #fd6d52;
      }
    }
  }
  .income-wrapper {
    // background-color: #fff;
    .income {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      .it {
        width: 49%;
        background-color: #fff;
        margin-bottom: 15px;
        border-radius: 5px;
        padding: 10px;
      }
    }
    .mahao {
      margin-top: 15px;
      background-color: #fff;
      border-radius: 5px;
      .rightEchart {
        height: 300px;
      }
      .title1 {
        color: #797979;
        font-size: 14px;
        padding: 15px 20px 15px;
        border-bottom: 1px solid #e8e7fe;
      }
      .ma-top {
        display: flex;
        align-items: center;
        padding: 0 20px 0px;
        border-bottom: 1px solid #e8e7fe;
        .titles {
          color: #797979;
          font-size: 14px;
          // padding: 0 20px 15px;
        }
      }

      .g-table {
        padding: 10px 20px;
        .area {
          color: #1890ff;
          cursor: pointer;
        }
        .grey {
          color: gray;
        }
        .breadcrumb {
          margin-bottom: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > div {
            margin-right: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
          }
          > p {
            padding: 0 10px;
            margin: 0;
          }
          div:hover {
            color: #1890ff;
          }
        }
        .areaBox {
          width: 300px;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          justify-content: space-between;
          .text {
            font-size: 20px;
          }
        }
      }
      .echarts-wrap {
        padding: 0 20px 20px;
        .btns {
          padding-bottom: 20px;
        }
        .echarts {
          min-height: 500px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          > div {
            width: 33.33%;
            height: 200px;
          }
        }
      }
    }
  }
}
//表格操作按钮
.icon-button {
  border: none;
  padding: 0;
  display: inline-block;
  align-items: center;
  width: 40px;
  height: 27px;
  background: none;
  font-size: 12px;
  line-height: 27px;
  color: #1890ff;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: -10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  .iconfont {
    font-size: 15px;
  }
  .text {
    font-size: 12px;
    display: none;
    color: #1890ff;
    a {
      color: inherit;
    }
  }
  &:hover {
    overflow: hidden;
    .iconfont {
      display: none;
    }
    .text {
      display: inline;
    }
  }
}
.icon-button-disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #aeb2b8 !important;
}
.icon-button[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  color: #aeb2b8 !important;
}
</style>
